<template>
  <div class="LegalKnowledge">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">法律知识</div>
    </div>-->

    <!-- 搜索栏 -->
    <van-search
      class="searchBox"
      v-model="searchKey"
      placeholder="请选择想要检索的标签后输入标题"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div class="searchBut" slot="action" @click="onSearch">搜索</div>
    </van-search>

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <!-- 功能入口按钮区域 -->
      <div class="entrance">
        <div class="etRowBox">
          <div class="etButton" @click="msgCheck(0)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_03.png" />
            <span class="ideText" :style="msgTitle === '婚姻继承'? activeColor: ''">婚姻继承</span>
          </div>

          <div class="etButton" @click="msgCheck(1)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_05.png" />
            <span class="ideText" :style="msgTitle === '借贷纠纷'? activeColor: ''">借贷纠纷</span>
          </div>

          <div class="etButton" @click="msgCheck(2)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_07.png" />
            <span class="ideText" :style="msgTitle === '交通事故'? activeColor: ''">交通事故</span>
          </div>

          <div class="etButton" @click="msgCheck(3)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_09.png" />
            <span class="ideText" :style="msgTitle === '物业相邻'? activeColor: ''">物业相邻</span>
          </div>
        </div>
        <div class="etRowBox">
          <div class="etButton" @click="msgCheck(4)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_15.png" />
            <span class="ideText" :style="msgTitle === '劳动争议'? activeColor: ''">劳动争议</span>
          </div>

          <div class="etButton" @click="msgCheck(5)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_16.png" />
            <span class="ideText" :style="msgTitle === '医疗纠纷'? activeColor: ''">医疗纠纷</span>
          </div>

          <div class="etButton" @click="msgCheck(6)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_17.png" />
            <span class="ideText" :style="msgTitle === '合同纠纷'? activeColor: ''">合同纠纷</span>
          </div>

          <div class="etButton" @click="msgCheck(7)">
            <img slot="icon" src="@/assets/transfer/legalKnowledge/low_19.png" />
            <span class="ideText" :style="msgTitle === '侵权纠纷'? activeColor: ''">侵权纠纷</span>
          </div>
        </div>
      </div>

      <!-- 正文区域 懒加载 -->
      <div class="spot">
        <div class="title">
          <span class="text">{{ msgTitle }}</span>
        </div>

        <!-- 懒加载 列表形式， item内复杂元素布局 -->
        <div class="listBox">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in list" :key="index" @click="toDet(item)">
              <div class="titles">
                <span class="mainTitle">{{ item.title }}</span>
              </div>

              <div class="summary">
                <img :src="picUrl(item.url)" v-if="item.url" width="100%" alt="" srcset="">
                <div v-html="item.description"></div>
              </div>

              <van-divider />
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LegalKnowledge",
  data() {
    return {
      searchKey: "",
      activeColor: "color: #007aff",
      msgTitle: "婚姻继承",
      lowType: "1",
      // 筛选内容 [{},{},{}……]
      list: [],
      finished: false,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0
    };
  },
  created() {
    this.getLowTypes();
  },
  methods: {
    back() {
      this.clearSearchKey();
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    toDet(msg) {
      this.$router.push({
        path: "/contradictionDet",
        query: {
          detData: msg
        }
      });
    },

    msgCheck(w) {
      switch (w) {
        case 0:
          this.msgTitle = "婚姻继承";
          this.lowType = "1";
          break;
        case 1:
          this.msgTitle = "借贷纠纷";
          this.lowType = "2";
          break;
        case 2:
          this.msgTitle = "交通事故";
          this.lowType = "3";
          break;
        case 3:
          this.msgTitle = "物业相邻";
          this.lowType = "4";
          break;
        case 4:
          this.msgTitle = "劳动争议";
          this.lowType = "5";
          break;
        case 5:
          this.msgTitle = "医疗纠纷";
          this.lowType = "6";
          break;
        case 6:
          this.msgTitle = "合同纠纷";
          this.lowType = "7";
          break;
        case 7:
          this.msgTitle = "侵权纠纷";
          this.lowType = "8";
          break;
        default:
          this.msgTitle = "婚姻继承";
          this.lowType = "1";
          break;
      }
      this.pageIndex = 1;
      this.getListData(true);
    },

    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 向平安看点list push数据
        this.loading = true;
        this.getListData(false);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.totalCount) {
          // 判断列表后台反馈数据总量=目前的数据量则结束
          this.finished = true;
        }
      }, 50);
    },

    onSearch() {
      console.log(this.searchKey);
      this.pageIndex = 1;
      this.getListData(true);
    },

    clearSearchKey() {
      this.searchKey = "";
      this.msgTitle = "婚姻继承";
    },

    // 请求列表数据
    getListData(isReload) {
      this.post("laws/loadInfo", {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        title: this.searchKey,
        lawsType: this.lowType
      })
        .then(res => {
          res.list.forEach(element => {
            element.description = element.description.replace(
              /\s(src=")/g,
              ' width="100%" height="150px" src="http://www.hkqwgb.cn:8080'
            );
          });
          console.log("legalKnowledge", res);
          if (isReload) {
            this.list = res.list;
          } else {
            this.list = this.list.concat(res.list);
            this.totalCount = res.pageInfo.totalCount;
            this.pageIndex += 1;
          }
        })
        .catch(err => {
          console.log("legalKnowledge-err", err);
        });
    },

    // 请求数据字典接口 获取顶部8个基本检索
    getLowTypes() {
      this.slow.getDictionaryValus("activityStatus").then(ret => {
        console.info(ret);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.LegalKnowledge {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .searchBox {
    padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm
      $sm-spaceing-block-base;

    position: absolute;
    width: $sm-img-per-max;
    z-index: 2;

    .searchBut {
      font-size: $sm-font-sizeVH-md;
      color: $sm-color-primary;
      font-weight: bold;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: calc(100vh - 60px);
    margin: 60px 0 0 0;

    .entrance {
      padding: 0 $sm-spaceing-block-base $sm-spaceing-block-sm
        $sm-spaceing-block-base;

      background: $sm-bg-color;

      .etRowBox {
        display: flex;
        flex-direction: row nowrap;
        justify-content: space-between;

        .etButton {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: $sm-img-per-base;
            height: $sm-img-per-base;
            margin: $sm-spacing-row-base $sm-spacing-row-base
              $sm-spacing-row-base $sm-spacing-row-base;
          }

          .ideText {
            font-size: $sm-font-sizeVH-sm;
          }
        }
      }
    }

    .spot {
      padding: $sm-spaceing-block-sm $sm-spaceing-block-base
        $sm-spaceing-block-sm $sm-spaceing-block-base;
      margin: $sm-spacing-col-sm 0 $sm-spacing-col-sm 0;

      background: $sm-bg-color;

      display: flex;
      flex-direction: column;

      .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        font-weight: bold;
      }

      .listBox {
        display: flex;
        flex-direction: column;

        .titles {
          display: flex;
          flex-direction: column;
          margin: $sm-spacing-col-xl 0 0 0;

          .mainTitle {
            font-size: $sm-font-size-title;
            font-weight: bold;
            color: $sm-color-title;
          }
        }

        .summary {
          margin: $sm-spacing-col-lg 0 $sm-spacing-col-lg 0;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          color: $sm-color-title;
        }
      }
    }
  }
}
</style>